<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>班级成绩分析-云校通</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<script src="<%=basePath %>/js/picker.js"></script>
<script src="<%=basePath %>/js/select.js"></script>
<body ontouchstart>
	<script src="<%=basePath %>/js/echarts-3.8.4.js"></script>
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a href="<%=basePath %>/ls/score/report/clazz" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title" ><span class="schoolYear"></span>成绩分析</h1>
	    	<div class="weui-header-right">
	    		<i class="icon icon-74"></i>
	    		<input type="text" id="schoolYear" readonly style="position: absolute;top: 0;opacity: 0;">
	    	</div>
	    </div>
		<div class="weui_tab_bd">
			<div class="weui_cells afterNone afterNoneBefore mt0">
				<div class="weui_cell bd-t0">
	          		<div class="weui_cell_hd weui_50">班级</div>
	          		<div class="weui_cell_hd weui_center_25">学科</div>
					<div class="weui_cell_hd weui_center_25">教师姓名</div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div class="weui_cell_hd weui_50 shortClazz f-14"></div>
	          		<div class="weui_cell_hd weui_center_25 f-14">语文</div>
					<div class="weui_cell_hd weui_center_25 f-14">${teachers.chineseTeacher }</div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div class="weui_cell_hd weui_50 shortClazz f-14"></div>
	          		<div class="weui_cell_hd weui_center_25 f-14">数学</div>
					<div class="weui_cell_hd weui_center_25 f-14">${teachers.mathTeacher }</div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div class="weui_cell_hd weui_50 shortClazz f-14"></div>
	          		<div class="weui_cell_hd weui_center_25 f-14">英语</div>
					<div class="weui_cell_hd weui_center_25 f-14">${teachers.englishTeacher }</div>
	          	</div>
			</div>
			<div class="weui_cells afterNone afterNoneBefore mt0">
				<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span class="schoolYear"></span> 综合成绩分析</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currTermExam" style="width: 100%;height:320px;"></div>
	          	</div>
	          	
				<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span class="newestExam"></span> 考试成绩分析</p>
		            </div>
	          	</div>
				<div class="weui_cell bd-t0" id="newestExamList">
	          		<div class="weui_cell_hd weui_center_25">班级</div>
	          		<div class="weui_cell_hd weui_center_25">学科</div>
	          		<div class="weui_cell_hd weui_center_25">实力</div>
					<div class="weui_cell_hd weui_center_25">排名</div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currExam" style="width: 100%;height:320px;"></div>
	          	</div>
      		</div>
      		<div class="weui_cells afterNone afterNoneBefore mt0">
				<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span class="newestExam"></span> 学生名单</p>
		            </div>
	          	</div>
	        </div>
      		<div class="weui_cells bd-t0 mt0" id="totalList">
      			<!-- <div class="weui_tab kcfd-list1" id="tab2">
		            <div class="weui_navbar">
		            	<div class="weui_navbar_item">
		                    	总计
		                </div>
		                <div class="weui_navbar_item">
		                    	语文
		                </div>
		                <div class="weui_navbar_item">
		                    	数学
		                </div>
		                <div class="weui_navbar_item">
		                    	英语
		                </div>
		            </div>
		            <div class="weui_tab_bd">
		            	<div class="weui_panel weui_tab_bd_item qingjia mt0">
				            <div class="weui_panel_bd">
				              	<div class="weui_cells mt0" id="totalList"></div>
				            </div>
			            </div>
			            <div class="weui_panel weui_tab_bd_item qingjia mt0">
				            <div class="weui_panel_bd">
				              	<div class="weui_cells mt0" id="chineseList"></div>
				            </div>
			            </div>
			            <div class="weui_panel weui_tab_bd_item qingjia mt0">
				            <div class="weui_panel_bd">
				              	<div class="weui_cells mt0" id="mathList"></div>
				            </div>
			            </div>
			            <div class="weui_panel weui_tab_bd_item qingjia mt0">
				            <div class="weui_panel_bd">
				              	<div class="weui_cells mt0" id="englishList"></div>
				            </div>
			            </div>
			        </div>
		        </div> -->
      		</div>
      		<div class="weui_cells bd-t0 mt0 mb40">
      			<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class="">班级历次考试实力排名</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="totalTermExam" style="width: 100%;height:450px;"></div>
	          	</div>
      		</div>
		</div>
	</div>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
	var classId = "${teachers.grade}" + (parseInt("${teachers.clazz}") < 10 ? "0${teachers.clazz}" : "${teachers.clazz}");
	$(function() {
		$(".shortClazz").html(getGradeName1("${term.termKey}", "${teachers.grade}") + "(${teachers.clazz})班");
		$('#tab2').tab({defaultIndex:0,activeClass:"tab-red"});
		termList();
		setTimeout(function(){termExam(null)}, 1000);
	})
	function termExam(schoolYear) {
		$.ajax({
    		url: basePath + "/ls/score/report/clazzScore/list",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			classId: classId,
    			termYear: schoolYear != null ? schoolYear.substr(0,schoolYear.indexOf("-")) : schoolYear
    		},
    		success: function(rspData) {
    			if(rspData.length == 0){
    				$.alert("没有考试数据!", "");
    				return;
    			}
    			var categoryList = [];
    			var emptyCategory = [];
    			var subjectData = [];
    			for(var i in rspData) {
    				if(!subjectData[rspData[i].subjectName]) {
    					subjectData[rspData[i].subjectName] = [];
    					subjectData[rspData[i].subjectName].subjectName = rspData[i].subjectName;
    				}
    				if(!categoryList[rspData[i].examId]) {
    					categoryList[rspData[i].examId] = [];
    					if(schoolYear != null) {
    						categoryList[rspData[i].examId] = rspData[i].examName+"("+
							rspData[i].termName.substring(rspData[i].termName.lastIndexOf("学年")+2,
									rspData[i].termName.lastIndexOf("学年")+3)+")";
    					}else {
    						categoryList[rspData[i].examId] = getGradeName1(rspData[i].termName.substring(0, 4), "${teachers.grade}") + "年级" +
    							rspData[i].termName.substring(rspData[i].termName.length - 3, rspData[i].termName.length) + 
    							rspData[i].examName;
    					}
    					emptyCategory[rspData[i].examId] = [];
    					emptyCategory[rspData[i].examId] = null;
    				}
    			}
    			for(var i in rspData) {
    				var cd = subjectData[rspData[i].subjectName];
    				if(cd) {
    					if(cd.data == null) {
    						cd.data = cloneArray(emptyCategory);
    					}
    					cd.data[rspData[i].examId] = rspData[i].strengthRanking;
					}
    				
    			}
    			if(schoolYear != null) {
    				$(".schoolYear").html(schoolYear);
       				var list = [], examId = null;
       				for(var i = rspData.length -1; i >= 0; i--) {
           				if(examId == null) examId = rspData[i].examId;
           				if(examId == rspData[i].examId) {
           					list.push(rspData[i]);
           				}
           			}
       				currExam(list);
       				clazzStudentScoreList(examId);
        			termExamReport(categoryList, subjectData);
    			}else {
    				totalTermExamReport(categoryList, subjectData);
    			}
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	
	function classExam(examId) {
		$.ajax({
    		url: basePath + "/ls/score/report/clazzScore/list",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			classId: classId,
    			examId: examId
    		},
    		success: function(rspData) {
   				currExam(rspData);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	
	function clazzStudentScoreList(examId) {
		$.ajax({
    		url: basePath + "/ls/score/report/clazzStudentScore/list",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			classId: classId,
    			examId: examId
    		},
    		success: function(data) {
    			studentScoreHtml(data);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function termList() {
		$.ajax({
    		url: basePath + "/termListForPhone",
    		type: 'POST',
    		dataType : "json",
    		success: function(data) {
    			var list = [];
    			var map = new Map();
    			for(var i in data) {
    				var termYear = data[i].termName.substr(0,data[i].termName.lastIndexOf("学期")-1);
    				var year = data[i].termName.substr(0,data[i].termName.indexOf("-"));
    				if(i == 0) {
    					termExam(termYear);
    					$(".schoolYear").html(termYear);
    				}
    				if(map.get(year) == null) {
    					map.set(year, termYear);
    					list.push(termYear);
    				}
    			}
    			$("#schoolYear").picker({
    			     title: "请选择学年",
    			     toolbarCloseText:'确定',
    			     onClose:function(){
    			     	termExam(this.cols[0].displayValue);
						 $(".schoolYear").html(this.cols[0].displayValue);
    			     },
    			     cols: [
    			       {
    			         textAlign: 'center',
    			         values: list
    			       }
    			     ]
    			   });
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function prizeList(schoolYear) {
		$.ajax({
    		url: basePath + "/ls/teaching/fruit/report/prizeList",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			classId: classId,
    			termYear: schoolYear.substr(0,schoolYear.indexOf("-"))
    		},
    		success: function(rspData) {
    			var html = '';
    			for(var i in rspData) {
    				html += '<div class="weui_cell bd-t0 prizeList" style="-webkit-align-items: none;align-items: left;padding-top: 0px;">\
    	          		<div class="weui_cell_hd f15 f-gray4e weui_75">'+rspData[i].projectName+'</div>\
    	          		<div class="weui_cell_hd f15 f-gray4e weui_center_25">'+rspData[i].awardLevel + " " + rspData[i].awardGrade+'</div>\
    	          	</div>';
    			}
    			$(".prizeList").remove();
    			$("#prizeList").after(html);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function currExam(data) {
		$(".newestExam").html(data[0].termName + data[0].examName);
		var html = '';
		for(var i in data) {
			html += '<div class="weui_cell bd-t0">\
          		<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+getGradeClazz(data[i].classGrade.toString())+'</div>\
          		<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+data[i].subjectName+'</div>\
          		<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+data[i].strength+'</div>\
				<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+data[i].strengthRanking+'</div>\
          	</div>';
		}
		$(".newestExamList").after(html);
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currExam'));

		option = {
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend: {
		        data:['特优率','优秀率','合格率','不合格率']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            name : "学科",
		            data : (function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(data[i].subjectName);
				    	}
				    	return list;
				    })()
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            name : "百分比%",
		            max : 100
		        }
		    ],
		    series : [
		        {
		            name:'特优率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].bestRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#2fdb96"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        },
		        {
		            name:'优秀率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].goodRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#fea61c"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        },
		        {
		            name:'合格率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].qualifiedRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#3bbb23"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        },
		        {
		            name:'不合格率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].lowRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#ece137"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        }
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	
	var examTemp = [];
	function termExamReport(categoryList, subjectData) {
		examTemp = categoryList;
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currTermExam'));
		option = {
		    tooltip: {
		        trigger: 'axis'
		    },
		    grid: {
		    	left: "12%",
		    	bottom: "25%",
		    	hoverable:true
		    },
		    legend: {
		    	data: (function () {
			    	var list = [];
			    	for(var i in subjectData) {
			    		list.push(subjectData[i].subjectName);
			    	}
			    	return list;
			    })()
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: getArray(categoryList),
		        triggerEvent:true,
		        name: "考试",
		        axisLabel: {
		        	interval: 0, 
		        	rotate: 65
		        }
		    },
		    yAxis: {
		        type: 'value',
		        name: "排名"
		    },
		    series: (function () {
		    	var list = [];
		    	for(var i in subjectData) {
		    		list.push({
		    			name: subjectData[i].subjectName,
			            type: 'line',
			            symbol: 'arrow',
			            symbolSize: 15,
			            data: getArray(subjectData[i].data)
		    		})
		    	}
		    	return list;
		    })()
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	    myChart.on('click', function (params) {
	    	for(var i in examTemp) {
	    		if(params.name == examTemp[i]) {
	    			classExam(i);
	   				clazzStudentScoreList(i);
	   				$.alert(params.name+", 考试数据加载成功", "");
	   				break;
	    		}
	    	}
	    });
	}
	
	function totalTermExamReport(categoryList, subjectData) {
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('totalTermExam'));
		option = {
		    tooltip: {
		        trigger: 'axis'
		    },
		    grid: {
		    	hoverable:true,
		    	bottom: '40%'
		    },
		    dataZoom: [{
	            show: true,
	            realtime: true,
	            start: 0,
	            end: 100
	        }],
		    legend: {
		    	data: (function () {
			    	var list = [];
			    	for(var i in subjectData) {
			    		list.push(subjectData[i].subjectName);
			    	}
			    	return list;
			    })()
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: getArray(categoryList),
		        triggerEvent:true,
		        name: "考试",
		        axisLabel: {
		        	interval: 0, 
		        	rotate: 80
		        }
		    },
		    yAxis: {
		        type: 'value',
		        name: "排名"
		    },
		    series: (function () {
		    	var list = [];
		    	for(var i in subjectData) {
		    		list.push({
		    			name: subjectData[i].subjectName,
			            type: 'line',
			            data: getArray(subjectData[i].data)
		    		})
		    	}
		    	return list;
		    })()
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	
	function sort(list, type) {
		for(var i = 0; i < list.length - 1; i++) {
			for(var j = 0; j < list.length - i - 1; j++) {
				var flag = false;
				if(type == 1) flag = list[j].chineseRanking > list[j+1].chineseRanking;
				else if(type == 2) flag = list[j].mathRanking > list[j+1].mathRanking;
				else if(type == 3) flag = list[j].englishRanking > list[j+1].englishRanking;
				else if(type == 4) flag = list[j].classRanking > list[j+1].classRanking;
				if(flag) {
					var swap = list[j];
					list[j] = list[j+1];
					list[j+1] = swap;
				}
			}
		}
		return list;
	}
	
	function getGradeClazz(gradeClazz) {
		return getGradeName1("${term.termKey}", gradeClazz.substr(0,4)) + 
		"(" + parseInt(gradeClazz.substr(4,gradeClazz.length)) + ")班";
	}
	
	function studentScoreHtml(data){
		var tList = sort(clone(data), 4);
		var html = '<div class="weui_cell">\
			<div class="weui_cell_hd weui_center_20 f-14"><b>姓名</b></div>\
			<div class="weui_cell_hd weui_center_20 f-14"><b>语文</b></div>\
			<div class="weui_cell_hd weui_center_20 f-14"><b>数学</b></div>\
			<div class="weui_cell_hd weui_center_20 f-14"><b>英语</b></div>\
			<div class="weui_cell_hd weui_center_20 f-14"><b>总分</b></div>\
	     </div>';
		for(var i in tList) {
			html += '<div class="weui_cell f-14">\
				<div class="weui_cell_hd weui_center_20">'+tList[i].studentName+'</div>\
				<div class="weui_cell_hd weui_center_20">'+tList[i].chineseScore+'</div>\
				<div class="weui_cell_hd weui_center_20">'+tList[i].mathScore+'</div>\
				<div class="weui_cell_hd weui_center_20">'+tList[i].englishScore+'</div>\
				<div class="weui_cell_hd weui_center_20">'+tList[i].sumScore+'</div>\
		     </div>';
		}
		$("#totalList").html(html);
	}
	function studentScoreForManageHtml(data) {
		var cList = sort(clone(data), 1), sList = sort(clone(data), 2), 
		eList = sort(clone(data), 3), tList = sort(clone(data), 4);
		var html = '<div class="weui_cell">\
			<div class="weui_cell_hd weui_center_25 f-14"><b>姓名</b></div>\
			<div class="weui_cell_hd weui_center_25 f-14"><b>单科分数</b></div>\
			<div class="weui_cell_hd weui_center_25 f-14"><b>单科年排</b></div>\
			<div class="weui_cell_hd weui_center_25 f-14"><b>总分班排</b></div>\
	     </div>';
	    var cHtml = html, sHtml = html, eHtml = html;
		for(var i in cList) {
			cHtml += '<div class="weui_cell f-14">\
						<div class="weui_cell_hd weui_center_25">'+cList[i].studentName+'</div>\
						<div class="weui_cell_hd weui_center_25">'+cList[i].chineseScore+'</div>\
						<div class="weui_cell_hd weui_center_25">'+cList[i].chineseRanking+'</div>\
						<div class="weui_cell_hd weui_center_25">'+cList[i].classRanking+'</div>\
				     </div>';
		}
		$("#chineseList").html(cHtml);
		for(var i in sList) {
			sHtml += '<div class="weui_cell f-14">\
						<div class="weui_cell_hd weui_center_25">'+sList[i].studentName+'</div>\
						<div class="weui_cell_hd weui_center_25">'+sList[i].mathScore+'</div>\
						<div class="weui_cell_hd weui_center_25">'+sList[i].mathRanking+'</div>\
						<div class="weui_cell_hd weui_center_25">'+cList[i].classRanking+'</div>\
				     </div>';
		}
		$("#mathList").html(sHtml);
		for(var i in eList) {
			eHtml += '<div class="weui_cell f-14">\
						<div class="weui_cell_hd weui_center_25">'+eList[i].studentName+'</div>\
						<div class="weui_cell_hd weui_center_25">'+eList[i].englishScore+'</div>\
						<div class="weui_cell_hd weui_center_25">'+eList[i].englishRanking+'</div>\
						<div class="weui_cell_hd weui_center_25">'+cList[i].classRanking+'</div>\
				     </div>';
		}
		$("#englishList").html(eHtml);
		var thtml = '<div class="weui_cell">\
			<div class="weui_cell_hd weui_center_25 f-14"><b>姓名</b></div>\
			<div class="weui_cell_hd weui_center_25 f-14"><b>总分</b></div>\
			<div class="weui_cell_hd weui_center_25 f-14"><b>班级排名</b></div>\
			<div class="weui_cell_hd weui_center_25 f-14"><b>年级排名</b></div>\
	     </div>';
		for(var i in tList) {
			thtml += '<div class="weui_cell f-14">\
						<div class="weui_cell_hd weui_center_25">'+tList[i].studentName+'</div>\
						<div class="weui_cell_hd weui_center_25">'+tList[i].sumScore+'</div>\
						<div class="weui_cell_hd weui_center_25">'+tList[i].classRanking+'</div>\
						<div class="weui_cell_hd weui_center_25">'+tList[i].gradeRanking+'</div>\
				     </div>';
		}
		$("#totalList").html(thtml);
	}
</script>
</html>